<template>
	<view>
		<!-- 显示日期和星期 -->
		<view class="flex-row-container">
			<!-- 月 -->
			<view class="flex-column-container">
				<view class="flex-column-inner-container">
					<view class="styled-text">月</view>
				</view>
			</view>
			<!-- 周一 周二 -->
			<view v-for="(day, index) in weekdays" :key="index" class="flex-column-container">
				<view class="flex-column-inner-container">
					<view class="styled-text">周{{ day }}</view>
				</view>
			</view>

		</view>


		<view class="month-weeks-row-container">
			<!-- 八月 -->
			<view class="show-month-box">
				<view class="show-month-circle-text">
					{{ showingMonth[showingWeek] }}
				</view>
			</view>
			<!-- 日期 -->
			<swiper @animationfinish="changeDateList" :current="showingWeek" class="date-swiper" @change="change">
				<swiper-item v-for="(weekName, week_idx) in weeksNames" class="week-name" :key="week_idx">
					<view v-for="(date, day_idx) in showingDays[showingWeek]" class="date-in-week"
						:key="day_idx">
						<view v-if="week_idx == week && day_idx == day && isRenderDayColor"
							class="date-item">
							{{ date }}
						</view>
						<view v-else style="font-size: 32rpx;">
							{{ date }}
						</view>
					</view>
					<view class="chooseWeek" 
						:animation="choose_week_animation">
						<view></view>
						<view class="week-name">{{ weekName }}</view>
						<view></view>
					</view>
				</swiper-item>
			</swiper>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'monthAndWeeks',
		props: {
			day: Number,
			week: Number,
			showingWeek:Number
		},
		data() {
			return {
				monthAndWeeks:undefined,
				choose_week_animation:'', //外部渲染绑定的animation
				isRenderDayColor:true,
				weekdays:['一', '二', '三', '四', '五', '六', '日'],
				monthsNames:['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'],
				startChooseAnimation:uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-in-out',
				}),
				stopChooseAnimation:uni.createAnimation({
					duration: 300,
					timingFunction: 'ease-in-out',
				}),
				timeout:'',
				weeksNames:{
					0: '第一周',
					1: '第二周',
					2: '第三周',
					3: '第四周',
					4: '第五周',
					5: '第六周',
					6: '第七周',
					7: '第八周',
					8: '第九周',
					9: '第十周',
					10: '第十一周',
					11: '第十二周',
					12: '第十三周',
					13: '第十四周',
					14: '第十五周',
					15: '第十六周',
					16: '第十七周',
					17: '第十八周',
					18: '第十九周',
					19: '第二十周',
					20: '第二十一周',
					21: '第二十二周',
					22: '第二十三周',
					23: '第二十四周',
				},
				total_weeks:24,
				showingMonth:[],
				showingDays:[],
			}
		},
		created() {
			this.showingMonth = this.showingMonthList(this.total_weeks)
			this.showingDays = this.showingDaysList(this.total_weeks)
		},
		methods: {
			change(e){
				this.startChooseWeek()
				this.stopChooseWeek()
			},
			startChooseWeek() {
				clearTimeout(this.timeout)
				this.choose_week_animation = this.startChooseAnimation.opacity(1).step().export()
			},
			stopChooseWeek() {
				var that = this
				this.timeout = setTimeout(() => {
					that.choose_week_animation = that.stopChooseAnimation.opacity(0).step().export()
				}, 1000)
			},
			changeDateList(e) {
				// console.log("changeDateList")
				
				// this.showingWeek = e.detail.current
				this.$emit("animationfinish",{'current':e.detail.current})
				// this.monthAndWeeks.startChooseWeek()
				// this.monthAndWeeks.stopChooseWeek()
			},
			showingMonthList(total_weeks) {
				var showingMonth = []
				for(let showingWeek=0;showingWeek<this.total_weeks;showingWeek++){
					// 获取开学日期
					const start_date = new Date(getApp().globalData.start_date);
				
					const showingWeekDate = new Date(start_date);
					showingWeekDate.setDate(start_date.getDate() + 7 * showingWeek); // 开学日期+7*this.week天
					// 获取开学日期+7*this.week天对应的月份
					const month = showingWeekDate.getMonth(); // 获取下一周日期的月份，下标从1开始
					showingMonth.push(this.monthsNames[month])
				}
				return showingMonth
			},
			showingDaysList(total_weeks) {
				var showingDays = []
				for(let showingWeek=0;showingWeek<this.total_weeks;showingWeek++){
					var daysDateList = new Array(7)
					const start_date = new Date(getApp().globalData.start_date);
				
					for (let i = 0; i < 7; i++) {
						const tempDate = new Date(start_date); // 获取开学日期
						tempDate.setDate(start_date.getDate() + 7 * showingWeek + i); // 增加7*showingWeek+i天
						daysDateList[i] = tempDate.getDate()
					}
					showingDays.push(daysDateList) 
				}
				return showingDays
			},
			
		},
		
		
	}
</script>

<style>
	.flex-row-container {
		display: flex;
		flex-direction: row;
		margin-top: 16rpx;
		height: 52rpx;
	}

	.flex-column-container {
		display: flex;
		flex-direction: column;
		width: 92rpx;
		align-items: center;
		position: relative;
		height: 52rpx;
	}

	.month-weeks-row-container {
		display: flex;
		flex-direction: row;
		height: 100rpx;
		margin-bottom: 8rpx;
	}

	.show-month-box {
		width: 92rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.show-month-circle-text {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 80rpx;
		background-color: #3478f6;
		border-radius: 92rpx;
	}

	.flex-column-inner-container {
		display: flex;
		flex-direction: column;
		width: 93rpx;
		align-items: center;
		position: relative;
		height: 52rpx;
		justify-content: space-between;
	}

	.styled-text {
		font-size: 24rpx;
		padding-bottom: 5rpx;
		height: 52rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.date-swiper {
		width: 651rpx;
		height: 100rpx;
		background-color: #d1d1d8;
		border-radius: 100rpx;
		margin-right: 7rpx;
		overflow: hidden;
		z-index: 103;
	}

	.date-in-week {
		width: 93rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 103;
	}



	.date-item {
		font-size: 32rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: #000;
		border-radius: 93rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.chooseWeek {
		z-index: 1044;
		position: absolute;
		left: 0;
		top: 0;
		background-color: #fff;
		color: #000;
		width: 100%;
		height: 100%;
		opacity: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		/* animationmation: stop 0.4s forwards;
		display: flex;flex-direction: row;z-index:103; */
	}

	.week-name {
		align-items: center;
		align-self: center;
		display: flex;
		flex-direction: row;
		overflow: hidden;
	}
</style>